<template>
  <div class="main">
      <nav-bar name="We重邮"  blackgroudColor="rgb(119,223,176)"></nav-bar>
    <div class="click-items">
      <div @click="$router.push('table')">
  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ic_jiaoshikebiaochaxun"></use>
        </svg>
        <div>课表查询</div>
      </div>
      <div @click="$router.push('/grade')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-chengjichaxun"></use>
        </svg>
        <div>成绩查询</div>
      </div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renyuanchuruxiaoguanli"></use>
        </svg><div>出入校管理</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ziyuan"></use>
        </svg><div>物业保修</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-kongjiaoshichaxun"></use>
        </svg><div :style="{'margin-left':'12px'}">空教室</div></div>
      <div @click="$router.push('/clockin')">  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zu"></use>
        </svg><div>每日打卡</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-hangcheng"></use>
        </svg><div>返校行程</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zhongyuan_fuzhi-"></use>
        </svg><div>图书馆座位</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zu"></use>
        </svg><div>研究生打卡</div></div>
      <div>  <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-renyuanchuruxiaoguanli"></use>
        </svg><div>研究生返校</div></div>
    </div>
    <div class="class-table" @click="$router.push('/table')">

        <div class="title">
          <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-ic_jiaoshikebiaochaxun"></use>
        </svg>
              <span>今 日 课 表</span>
       </div>
       <div class="myclass">智能科学与技术实验室（综合实验楼B515）</div>
       <div class="looktable"><span>查看完整课表</span></div>
    </div>
     
    <div class="news-img">
      <img src="@/assets/news.png" alt="" />
    </div>
    <div class="card-price">

       <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yikatong"></use>
        </svg>
        <span>一 卡 通</span>
         <div>
           <span>余额：</span>
               <h2>￥0.8</h2>
         </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import navBar from '@/components/navbar'
import tabBar from "@/components/tabBar";
export default {
  components: {
    tabBar,
    navBar
  },
};
</script>
  
<style scoped>
.click-items {
  height: 200px;
  background-color: white;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
.click-items div {
  width: 65px;
  margin-right: 10px;
}
.click-items div div {
  margin-top: 5px;
  margin-left: 5px;
}

.class-table {
  height: 100px;
  background-color: white;
  margin-bottom: 10px;
  padding: 10px;

}
.class-table .title{
  border-bottom: 1px solid rgba(139,139,139,.2);
}

.class-table .title span{
  margin-left: 5px;
   position: relative;
   top: -5px;
}
.class-table .icon{
    width: 2em;
    height: 2em;
}
.class-table .myclass{
  padding: 3px;
    font-size: 20px;
    border-bottom: 1px solid rgba(139,139,139,.2);
       color: rgb(130,134,139);


}
.class-table .looktable{
   height: 50px;
   text-align: center;
   line-height: 50px;
   color: rgb(130,134,139);
}
.news-img img {
  width: 100%;
}
.card-price {
  height: 300px;
  margin-top: 10px;
  background-color: white;
  

}
.card-price .icon{
  position: relative;
  top: 10px;
  height: 2em;
  width: 2em;

}
.card-price div {
  margin-top: 10px;
border-top: 1px solid rgba(139,139,139,.2);

}
.card-price div h2{
  color: chocolate;
  margin: 0;
   font-size: 100px;
   text-align: center;
}
</style>